<template>
  <div>
    <el-page-header @back="handleBack" content="添加信息"></el-page-header>
    <el-row>
      <el-col :span="8">
        <el-form
          :model="addForm"
          label-width="auto"
          ref="addForm"
          :rules="rules"
        >
          <el-form-item prop="Customerlist" label="客户">
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="addForm.Customerlist"
            ></el-input>
          </el-form-item>
          <el-form-item prop="identity" label="身份">
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="addForm.identity"
            ></el-input>
          </el-form-item>
          <el-form-item prop="affair" label="事务">
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="addForm.affair"
            ></el-input>
          </el-form-item>
          <el-form-item prop="speedprogress" label="进度">
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="addForm.speedprogress"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="subLoading" @click="handleAdd" type="primary"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      addForm: {},
      subLoading: false,
      rules: {
        Customerlist: [
          {
            required: true,
            message: "客户不可以为空",
          },
        ],
        identity: [
          {
            required: true,
            message: "身份名称不可以为空",
          },
        ],
        affair: [
          {
            required: true,
            message: "事务不可以为空",
          },
        ],
        speedprogress: [
          {
            required: true,
            message: "进度不可以为空",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("pmModel", ["PMList"]),
    formatTime() {
      return function(time) {
        let d = new Date(time);
        return `${d.getFullYear()}-${d.getMonth() +
          1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
      };
    },
  },
   async created() {
    let id = this.$route.query.id;
    console.log("receive id", id);
    const { data: result } = await this.$http.put("ListOneReceptions", { id: id });
    this.addForm = result;
    this.addForm.id = id;
  },
  methods: {
    ...mapActions("pmModel", ["getUsersList"]),
    handleBack() {
      this.$router.history.go(-1);
    },
    async handleAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          const { data: result } = await this.$http.post(
            "ModifyReceptions",
            this.addForm
          );
          if (result.errorCode < 0) {
            alert("修改失败");
          } else {
            this.subLoading = true;
            alert("修改成功");
            this.subLoading = false;
            this.handleBack();
          }
        } else {
          alert("修改失败");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.el-page-header {
  margin: 5%;
}
.el-date-picker {
  width: 345px;
}

</style>
